<template>
<Row type="flex">
  <Col :span="24">
    <Panel id="course-card" shadow>
      <div slot="title">{{$t('m.Courses')}}</div>
      <p id="no-course" v-if="courses.length == 0">{{$t('m.No_Course')}}</p>
      <Row>
        <Col :span="5" v-for="course in courses" :key="course.id">
          <Card class="course-card" :title="course.name">
            <p v-html="course.description"></p>
            <div class="card-bottom">
              <a href="#" @click="showClassroomList(course.id)">进入课程</a>
            </div>
          </Card>
        </Col>
      </Row>
    </Panel>
    <Pagination :total="total" :pageSize="limit" @on-change="getCourseList" :current.sync="page"></Pagination>
  </Col>
  <Modal
    v-model="classroomListModal"
    width="80%"
    :title="$t('m.MyClassroom')"
    @on-cancel="classroomListModal = false"
    :scrollable="true">
      <Table :columns="classroomInfoColumns" :data="classroomList">
      </Table>
      <div slot="footer">
        <span style="color: red; float: left;">注意：若无可用教室，请联系教师注册教室！</span>
        <Button @click="classroomListModal = false">取消</Button>
        <Button @click="toCourse" type="primary">{{$t('m.OnlyGlanceCourse')}}</Button>
      </div>
    </Modal>
</Row>
</template>

<script>
import { mapGetters } from 'vuex'
import api from '../../api.js'
import Pagination from '@/pages/oj/components/Pagination'
export default {
  name: 'course-list',
  components: {
    Pagination
  },
  data () {
    return {
      page: 1,
      total: 0,
      limit: 10,
      keyword: '',
      courses: [],
      classroomList: [],
      classroomListModal: false,
      selectedCourse: null,
      classroomInfoColumns: [
        {
          title: '名称',
          key: 'name'
        },
        {
          title: '开课时间',
          key: 'start'
        },
        {
          title: '结课时间',
          key: 'end'
        },
        {
          title: '进入教室',
          align: 'center',
          render: (h, params) => {
            return h('Button', {
              props: {
                type: 'primary',
                size: 'small',
                disabled: this.isAdminRole ? false : (new Date(params.row.end)) < (new Date())
              },
              on: {
                click: () => {
                  this.toClassroom(params.row)
                }
              }
            }, '进入')
          }
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['isAuthenticated', 'isAdminRole'])
  },
  mounted () {
    this.getCourseList()
  },
  methods: {
    getCourseList (page = 1) {
      let offset = (page - 1) * this.limit
      api.getCourseList(offset, this.limit, this.keyword).then((res) => {
        this.courses = res.data.data.results
        this.total = res.data.data.total
      })
    },
    toCourse () {
      let courseId = this.selectedCourse
      this.$router.push({name: 'course-details', params: {courseId}})
    },
    toClassroom (classroom) {
      let classroomId = classroom.id
      let courseId = this.selectedCourse
      this.$router.push({name: 'course-classroom-details', params: {courseId, classroomId}})
    },
    showClassroomList (courseId) {
      if (this.isAuthenticated) {
        this.selectedCourse = courseId
        api.getClassroomList(courseId).then(res => {
          this.classroomList = res.data.data
        })
        this.classroomListModal = true
      } else {
        this.$error(this.$i18n.t('m.NotLogin'))
      }
    }
  }
}
</script>
<style  scoped>
#no-course {
    text-align: center;
    font-size: 16px;
    padding: 20px;
}

.course-card {
    margin: 10px 20px 50px 20px;
}

.card-bottom {
    margin-top: 10px;
    text-align: right;
}
</style>